import React, { useEffect, } from "react";
import * as echarts from "echarts";
export default function Proprotion() {

    let data = 35
    useEffect(() => {
        //请求数据  把数据放入 图表中
        var myChart = echarts.init(document.getElementById("proprotion1") as HTMLDivElement);
        // 指定图表的配置项和数据
        var option: any = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}%',
            },
            title: {
                text: data + "%",
                subtext: '2000km²',
                left: 'center',
                top: '35%', //top待调整
                textStyle: {
                    color: '#65b8f8',
                    fontSize: 22,
                    fontFamily: 'DINAlternate-Bold',
                },
                subtextStyle: {
                    color: '#AAA9A9',
                    fontSize: 10,
                    fontFamily: 'PingFangSC-Regular',
                    top: '50%',
                },
                itemGap: 4, //主副标题间距
            },
            legend: {
                show: false,
                data: ['Baidu'],
            },
            series: [
                {
                    name: '内圈',
                    type: 'pie',
                    selectedMode: 'single',
                    //center: ["50%","60%"],
                    radius: ['58%', '65%'],
                    label: {
                        position: 'center',
                        fontSize: 7,
                    },
                    labelLine: {
                        show: false,
                    },
                    data: [
                        {
                            value: 100,
                            itemStyle: {
                                normal: {
                                    // color: "rgba(225,243,252,0.25)",
                                    color: 'rgba(234,242,254,1)',
                                },
                            },
                        },
                    ],
                },
                {
                    name: '外圈',
                    type: 'pie',
                    //center: ["50%","60%"],

                    radius: ['65%', '85%'],
                    labelLine: {
                        length: 30,
                    },
                    label: {
                        show: false,
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#F6F8FC',
                        borderColor: '#8C8D8E',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            a: {
                                color: '#6E7079',
                                lineHeight: 22,
                                align: 'center',
                            },
                            hr: {
                                borderColor: '#8C8D8E',
                                width: '100%',
                                borderWidth: 1,
                                height: 0,
                            },
                            b: {
                                color: '#4C5058',
                                fontSize: 7,
                                fontWeight: 'bold',
                                lineHeight: 33,
                            },
                            per: {
                                color: '#fff',
                                backgroundColor: '#4C5058',
                                padding: [3, 4],
                                borderRadius: 4,
                            },
                        },
                    },
                    data: [
                        {
                            value: data,
                            name: '数据',
                            itemStyle: {
                                normal: {
                                    // color: [
                                    //         [
                                    //             0,
                                    //             new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    //                 offset: 0.2,
                                    //                 color: "rgba(13,44,67,0.35)"
                                    //             },
                                    //             {
                                    //                 offset: 0.5,
                                    //                 color: "rgba(13,44,67,0.7)"
                                    //             },
                                    //             ])
                                    //         ],
                                    //         [0.5, 'rgba(85, 255, 0, 1)'],
                                    //         [1, 'rgba(85, 255, 0, 1)']
                                    //     ]
                                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        {
                                            offset: 0,
                                            color: 'rgba(33,196,170,0.35)',
                                        },
                                        {
                                            offset: 0.2,
                                            color: 'rgba(33,196,170,0.35)',
                                        },
                                        {
                                            offset: 0.48,
                                            color: 'rgba(33,196,170,0.55)',
                                        },
                                        {
                                            offset: 0.98,
                                            color: 'rgba(33,196,170,0.75)',
                                        },
                                    ]),
                                },
                            },
                        },
                        {
                            value: 1,
                            name: 'Direct',
                            itemStyle: {
                                normal: {
                                    color: 'rgb(20,169,145)',
                                    borderWidth: 1,
                                    //borderCap: "square",
                                    //borderJoin: "round",
                                    borderColor: 'rgb(20,169,145)',
                                },
                            },
                        },
                        {
                            value: 100 - data,
                            name: '其余',
                            itemStyle: {
                                normal: {
                                    color: '#fff',
                                },
                            },
                        },
                    ],
                },
            ],
        };




        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }, []);

    return <div><div id="proprotion1" style={{ height: "120px", width: "120px" }}></div>
        <div className="propro">数据指标一</div>
    </div>
}
